<template>
	<div id="nav_header">
		<ul class="nav_wrap">
			<li class="nav_item">
				<router-link :to="{path:'/'}">
					<i class="iconfont icon-shouye"></i>
					首页
				</router-link>
			</li>
			<li class="nav_item">
				<div>
					<i class="iconfont icon-wenzhangfenlei"></i>
					web前端
					<i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>	
				</div>
				<ul class="sub_nav_wrap">
					<li class="sub_item">
						<router-link :to="{path:'/category',query:{type:'vue'}}">
							<i class="iconfont icon-vuejs"></i>
							vue
						</router-link>
					</li>
					<li class="sub_item">
						<router-link :to="{path:'/category',query:{type:'react'}}">
							<i class="iconfont icon-react"></i>
							react
						</router-link>
					</li>
					<li class="sub_item">
						<router-link :to="{path:'/category',query:{type:'node'}}">
							<i class="iconfont icon-node"></i>
							node
						</router-link>
					</li>
					<li class="sub_item">
						<router-link :to="{path:'/category',query:{type:'javascript'}}">
							<i class="iconfont icon-bxl-javascript"></i>
							javascript
						</router-link>
					</li>
				</ul>
			</li>
			<li class="nav_item">
				<router-link :to="{path:'/category',query:{type:'生活随笔'}}">
					<i class="iconfont icon-kafei"></i>
					生活随笔
				</router-link>
			</li>
		</ul>  
		<!-- <el-menu
		  :default-active="activeIndex"
		  class="el-menu-demo"
		  mode="horizontal"
		  @select="handleSelect"
		  background-color="#fff"
		  text-color="#999"
		  active-text-color="#ffd04b"
		>
		  <el-menu-item index="1">处理中心</el-menu-item>
		  <el-menu-item index="2">我的工作台</el-menu-item>
		  <el-menu-item index="3">消息中心</el-menu-item>
		  <el-menu-item index="4">订单管理</el-menu-item>
		</el-menu> -->
	</div>
</template>
<script>
export default {
  name: "Nav",
  data() {
    return {
      // activeIndex: "1"
    };
  },
  methods: {
    // handleSelect() {}
  }
};
</script>  

<style lang="stylus" scoped>
#nav_header{
	width:100%;
	.nav_wrap{
		display:flex;
		justify-content:space-around;
		.nav_item{
			position:relative;
			div{
				line-height:60px;
				cursor:default;
			}
			a{
				display:block;
				padding:0 10px;
				line-height:60px;
				&:hover{
					color:#06aaff;
				}
			}
			.router-link-exact-active{
				color:#06aaff;
			}
			&:hover .sub_nav_wrap{
				display:block;
			}
			.sub_nav_wrap{
				position: absolute;
				z-index:999;
				left: 0;
				top:100%;
				width:180px;
				background:#fff;
				border-radius:3px;
				box-shadow:0px 0px 1px 1px #eee;
				transition:.5s;
				display:none;
				.sub_item{
					a{
						display:block;
						padding:10px 15px;
						line-height:20px;
						transition 0.3s;
						&:hover{
							background:#06aaff;
							color:#fff;
							text-indent:10px;
						}
					}
				}
			}
		}
	}
}
// #nav_header {
//   color: red;
// }
</style>
